<template>
  <div class="wrapper">
    <img :src="imgUrl.login" id="img" />
    <div class="box">
      <div class="box-o">
        <h3>欢 迎 登 录</h3>
        <div class="input">
          <input
            type="text"
            v-model="account"
            name="account"
            placeholder="组织名称"
          />
          <img class="one" :src="imgUrl.yh" alt />
          <input
            type="password"
            v-model="password"
            name="password"
            placeholder="密码"
          />
          <img class="two" :src="imgUrl.mm" alt />
        </div>
        <div class="three">
          <span @click="$jump('registered')">注册</span>
          <span v-show="0">忘记密码</span>
        </div>
        <div class="btn" @click="login()">
          <button type="submit">立即登录</button>
        </div>
        <div id="home" @click="$jump('homePage')">
          <span>返回首页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      imgUrl: {
        login: require('../../static/img/login.png'),
        yh: require('../../static/img/yh.png'),
        registered: require('../../static/img/registered.png'),
        mm: require('../../static/img/mm.png')
      },
      account: '',
      password: ''
    }
  },
  computed: {},
  watch: {},
  methods: {
    login () {
      let _this = this
      this.$http({
        method: 'post',
        url: 'v1/login/login',
        data: {
          user: _this.account,
          password: _this.password
        }
      })
        .then(res => {
          if (res.data.data.code === 200) {
            this.$message.success('登陆成功')
            this.$router.push('/')
            window.sessionStorage['id'] = res.data.data.data.id
            window.sessionStorage['name'] = res.data.data.data.name
            window.sessionStorage['party_id'] = res.data.data.data.party_id
            window.sessionStorage['party_name'] = res.data.data.data.party_name
            console.log(res.data.data.data.overview_three,111222)
            if(res.data.data.data.overview_three > 0){
                this.$alert("当前组织有"+res.data.data.data.overview_three+"个项目需要进行优化信息创建", "提示", {
                  confirmButtonText: "确定",
                  callback: action => {
                    // this.$message({
                    //   type: 'info',
                    //   message: ''
                    // });
                  }
                });
                return false;
            }
          } else {
            alert(res.data.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang="scss" scoped>
.wrapper {
  min-width: 1280px;
  height: 720px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;

  #home {
    width: 100%;
    color: red;
    font-size: 12px;
    margin: 20px auto 0;
    text-align: center;
    cursor: pointer;
  }

  #img {
    position: fixed;
    left: 0%;
    top: 0%;
    width: 100vw;
    height: 100vh;
    z-index: -1;
  }

  .box {
    z-index: 999;
    width: 736px;
    height: 489px;
    background-color: rgba($color: #fff, $alpha: 0.5);
    box-shadow: 0px 3px 29px 0px rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .box-o {
      width: 434px;
      height: 309px;

      .btn {
        width: 218px;
        height: 56px;
        margin: 0 auto;

        button {
          box-sizing: border-box;
          width: 218px;
          height: 56px;
          background-color: #e60012;
          border: 1px solid #e60012;
          box-shadow: 3px 5px 9px 0px rgba(252, 142, 142, 0.47);
          border-radius: 28px;
          text-align: center;
          line-height: 50px;
          font-family: 'MicrosoftYaHei';
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;
          cursor: pointer;
          outline: none;
        }
      }

      .three {
        margin: 15px auto 31px;
        width: 96%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-family: 'MicrosoftYaHei';
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #666666;
          cursor: pointer;
        }
      }

      .input {
        width: 100%;
        height: 135px;
        margin-top: 33px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;

        .one {
          width: 15px;
          height: 17px;
          position: absolute;
          top: 14%;
          left: 5%;
        }

        .two {
          width: 18px;
          height: 19px;
          position: absolute;
          bottom: 14%;
          left: 5%;
        }

        input {
          width: 434px;
          height: 56px;
          border-radius: 28px;
          border: solid 1px #a5acbb;
          opacity: 0.8;
          padding: 0 54px;
          box-sizing: border-box;
          outline: none;
          font-family: 'MicrosoftYaHei';
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 88px;
          letter-spacing: 0px;
          color: #333333;
        }
      }

      h3 {
        // font-family: "HanWangKaiBold-Gb5";
        font-family: 'MicrosoftYaHei';

        font-size: 26px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        text-align: center;
      }
    }
  }
}
</style>
